.preview-modal {
  display: flex;
  flex-direction: column;
  width: 50vw !important;
  max-width: 1000px !important;
  min-width: 320px !important;

  .preview-modal-header-container {
    .preview-modal-title {
      display: flex;
      padding: 12px 8px 0px 16px;
      justify-content: space-between;
      align-items: center;
      align-self: stretch;
    }
  }

  .preview-modal-body-container {
    display: flex;
    padding: 12px 16px;
    flex-direction: column;
    gap: 8px;

    .preview-file-details {
      display: flex;
      align-items: center;
      gap: 24px;
      align-self: stretch;

      color: var(--requestly-color-text-default);
      font-family: var(--requestly-font-family-default);
      font-size: var(--requestly-font-size-sm);
      font-style: normal;
      font-weight: 400;
      line-height: 18px;

      .detail-label {
        color: var(--requestly-color-text-subtle);
      }
    }
  }

  .warning-state-messaging-container {
    padding: 12px 16px;
    .warning-state-banner-container {
      display: flex;
      padding: 8px 32px 8px 12px;
      border-radius: 4px;
      border: 1px solid var(--requestly-color-warning-800);
      background: var(--requestly-color-warning-900);
      .warning-state-banner-fields {
        display: flex;
        justify-content: center;
        gap: 8px;
        align-self: stretch;
        .warning-icon {
          svg {
            color: var(--requestly-color-warning-500);
          }
        }
        .warning-text {
          color: var(--requestly-color-text-default);
          font-family: var(--requestly-font-family-default);
          font-size: var(--requestly-font-size-sm);
          font-style: normal;
          font-weight: 500;
          line-height: 18px;
        }
      }
    }
  }

  .preview-modal-footer-container {
    display: flex;
    padding: 12px 16px 16px 8px;
    justify-content: flex-end;
    gap: 8px;
    align-items: center;
  }
}

.preview-modal-fixed-width {
  width: 680px !important;

  .preview-modal-header-container {
    .preview-modal-title {
      display: flex;
      padding: 12px 8px 0px 16px;
      justify-content: space-between;
      align-items: center;
      align-self: stretch;
    }
  }

  .preview-modal-body-container {
    display: flex;
    padding: 12px 16px;
    flex-direction: column;
    gap: 8px;

    .preview-file-details {
      display: flex;
      align-items: center;
      gap: 24px;
      align-self: stretch;

      color: var(--requestly-color-text-default);
      font-family: var(--requestly-font-family-default);
      font-size: var(--requestly-font-size-sm);
      font-style: normal;
      font-weight: 400;
      line-height: 18px;

      .detail-label {
        color: var(--requestly-color-text-subtle);
      }
    }
  }

  .error-state-messaging-container {
    display: flex;
    padding: 24px 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;

    .detail-label {
      color: var(--requestly-color-text-subtle);
      text-align: center;

      font-family: var(--requestly-font-family-default);
      font-size: var(--requestly-font-size-sm);
      font-style: normal;
      font-weight: 400;
      line-height: 18px;
    }

    .error-state-fix-suggestion {
      display: flex;
      padding: 12px 16px;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      align-self: stretch;
      border-radius: 8px;
      background: var(--requestly-color-neutral-1100);

      .example-label {
        color: var(--requestly-color-text-placeholder);
        text-align: center;

        /* overline/medium */
        font-family: var(--requestly-font-family-default);
        font-size: var(--requestly-font-size-2xs);
        font-style: normal;
        font-weight: 500;
        line-height: 13px;
        letter-spacing: 1px;
        text-transform: uppercase;
      }

      .code-example {
        margin: 8px 0;
        border-radius: 4px;
        background-color: var(--requestly-color-background-dark);
        overflow-x: auto;
        align-self: stretch;

        code {
          font-family: "Consolas", "Monaco", "Courier New", monospace;
          font-size: 12px;
          line-height: 1.5;
          color: var(--requestly-color-text-placeholder);
          white-space: pre;
          display: block;

          .key {
            color: var(--requestly-color-error-text);
          }

          .value {
            color: var(--requestly-color-success-text);
          }

          .punctuation {
            color: var(--requestly-color-text-placeholder);
          }
        }
      }
    }

    .error-state-footer-container {
      display: flex;
      gap: 8px;
    }
  }

  .loading-state-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    gap: 16px;
    min-height: 200px;

    .loading-spinner {
      display: flex;
      align-items: center;
      justify-content: center;

      .spinner-placeholder {
        .spinner-icon {
          color: var(--requestly-color-primary-400);
          animation: spin 1s linear infinite;

          .spinner-circle {
            stroke-dashoffset: 0;
            animation: dash 1.5s ease-in-out infinite;
          }
        }
      }
    }

    .loading-message {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      text-align: center;

      .loading-title {
        color: var(--requestly-color-text-default);
        font-family: var(--requestly-font-family-default);
        font-size: var(--requestly-font-size-md);
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
      }

      .loading-description {
        color: var(--requestly-color-text-subtle);
        font-family: var(--requestly-font-family-default);
        font-size: var(--requestly-font-size-xs);
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
      }
    }
  }

  .large-file-messaging-container {
    display: flex;
    padding: 8px 16px 16px 16px;
    align-items: flex-start;
    gap: 64px;
    align-self: stretch;

    .large-file-text {
      color: var(--requestly-color-text-subtle);

      /* body/default */
      font-family: var(--requestly-font-family-default);
      font-size: var(--requestly-font-size-md);
      font-style: normal;
      font-weight: 400;
      line-height: 18px;
    }
  }

  .preview-modal-footer-container {
    display: flex;
    padding: 12px 16px 16px 8px;
    justify-content: flex-end;
    gap: 8px;
    align-items: center;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: -60;
  }
  100% {
    stroke-dashoffset: -120;
  }
}
